<template>
	<view class="my">
		<view class="top_login">
			<view style="align-items: center;display: flex;padding-top: 20px;">
				<view class="image_box">
					<!-- <image src="/static/images/my/my.png" mode=""></image> -->
					<image style="border-radius: 50%;" :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="member_login" @click="goLogin">
					<!-- <p class="login">点击登录</p> -->
					<p class="login">{{userInfo.nickname}}</p>
					<p class="member_level">
						<view class="vip">
							<img src="../../static/images/my/vip.png" alt=""  />
						</view>
						<view class="viptext">普通会员</view>
					</p>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="top">
				<view class="balance" @click="goBalance">
					<view class="icon_image">
						<image src="/static/images/my/wait_pay.png" mode=""></image>
					</view>
					<view class="title">
						<p>余额</p>
						<p>{{userInfo.money}}</p>
					</view>
				</view>
				<view class="collection" @click="goCollection">
					<view class="icon_image">
						<image src="/static/images/my/collection.png" mode=""></image>
					</view>
					<view class="title">
						<p>收藏</p>
						<p>{{userInfo.collects}}</p>
					</view>
				</view>
				<view class="coupon" @click="goCoupon">
					<view class="icon_image">
						<image src="/static/images/my/coupon.png" mode=""></image>
					</view>
					<view class="title">
						<p>优惠券</p>
						<p>{{userInfo.coupons}}</p>
					</view>
				</view>
			</view>
			<view class="orders" @click="goOrders">
				<view class="my_order">我的订单</view>
				<view class="all_order">全部订单></view>
			</view>
			<view class="bottom">
				<view class="order_type" v-for="(item,index) in orderType" :key="index">
					<view class="icons " >
						<image :src="'/static/images/my/'+item.image" mode=""></image>
					</view>
					<text>{{item.text}}</text>
					<text class="marker" v-if="item.count > 0">{{item.count}}</text>
				</view>
			</view>
		</view>
		<view class="information">
			<view class="information_item" v-for="(item,index) in informationList" :key="index" @click="JumpPage(item)">
				<view class="left">
					<view class="icons iconfont" :class="item.image">
						<!-- <image :src="item.image" mode=""></image> -->
						<!-- <uni-icons :type="item.icon" size="32"> </uni-icons> -->
					</view>
					<text>{{item.text}}</text>
				</view>
				<view class="right">
					<!-- <image src="/static/images/my/right.png" mode=""></image> -->
					<uni-icons type="forward" size="18"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				userInfo:{
					nickname:'点击登录',
					avatar:"/static/images/my/my.png"
				},
				orderType:[
					// {
					// 	typeId:0,
					// 	image:'all_orders.png',
					// 	text:'全部'
					// },
					{
						typeId:1,
						image:'ongoing.png',
						text:'进行中'
					},
					{
						typeId:2,
						image:'handle.png',
						text:'待补单'
					},
					{
						typeId:3,
						image:'finish.png',
						text:'已完成'
					},
					{
						typeId:4,
						image:'evaluate.png',
						text:'待评价'
					},
					{
						typeId:5,
						image:'send.png',
						text:'已取消'
					},
				],
				informationList:[
					{
						infoId:0,
						image:'icon-bussiness-man',
						text:'会员信息',
						icon:'person',
						url:'/pages/my/member/member'
					},
					{
						infoId:1,
						image:'icon-map',
						text:'我的地址',
						icon:'location',
						url:'/pages/my/myAddress/myAddress'
					},
					{
						infoId:1,
						image:'icon-map',
						text:'我的邀请',
						icon:'invitation',
						url:'/pages/my/invitation/invitation'
					},
					{
						infoId:6,
						image:'icon-add-account',
						text:'技师招募',
						icon:'image',
						url:'/pages/my/recruit/recruit'
					},
					{
						infoId:3,
						image:'icon-editor',
						text:'意见反馈',
						icon:'chatbubble',
						url:'/pages/my/opinion/opinion'
					},
					{
						infoId:4,
						image:'icon-suggest',
						text:'用户协议',
						icon:'email',
						url:'/pages/my/agreement/agreement'
					},
					{
						infoId:5,
						image:'icon-unlock',
						text:'隐私声明',
						icon:'locked',
						url:'/pages/my/agreement/agreement'
					},
				],
			};
		},
		onLoad(){
			this.getForce()
		},
		onShow() {
			this.getUserInfo()
			this.getOrderStatus()
		},
		methods:{
			//强制登录配置
			getForce(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
						console.log(result,'------------------------getForce')
						this.force_login = result.data.force_login
						this.phone_login = result.data.phone_login
					}
				})
			},
			//获取订单状态
			getOrderStatus(){
				this.$http({
					url:'/api/product/order/status_count',
					method:'get',
					success:result=>{
					console.log(result,'----------------------statusCount')
						if(result.code  == 200){
							let data = result.data
							this.orderType.forEach((item,index)=>{
								switch (item.typeId){
									case 1: item.count = data.processing
										break;
									case 2: item.count = data.charging
										break;
									case 3: item.count = data.completed
										break;
									case 4: item.count = data.evaluated
										break;
									default: item.count = data.canceled
										break;
								}
							})
						}
					}
				})
			},
			//获取用户信息
			getUserInfo(){
				this.$http({
					url:'/api/user/info',
					method:'get',
					success:result=>{
					console.log(result)
						if(result.code  == 200){
							this.userInfo = result.data.info
							uni.setStorageSync('userInfo',JSON.stringify(this.userInfo))
						}
					}
				})
			},
			//余额
			goBalance(){
				uni.navigateTo({
					url:`/pages/my/balance/balance?yue=${this.userInfo.money}`
				})
			},
			//优惠券
			goCoupon(){
				uni.navigateTo({
					url:'/pages/my/coupon/coupon'
				})
			},
			//收藏
			goCollection(){
				uni.navigateTo({
					url:'/pages/my/collection/collection'
				})
			},
			//页面跳转
			JumpPage(data){
				uni.navigateTo({
					url:data.url+'?infoId='+data.infoId
				})
			},
			//我的订单
			goOrders(){
				uni.reLaunch({
					url:'/pages/orders/index'
				})
			},
			//登录
			goLogin(){
				if(this.userInfo.nickname == "点击登录"){
					if(navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1){
						uni.navigateTo({
							url:'/pages/login/index'
						})
					}else{
						let url = ''
						if(this.phone_login){
							url = '/pages/login/login'
						}else{
							url = '/pages/login/index'
						}
						setTimeout(() => {
							uni.navigateTo({
								url:url
							})
						}, 1000)
						// uni.navigateTo({
						// 	url:'/pages/login/login'
						// })
					}
				}else{
					return false;
				}
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.my {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		.top_login {
			/* #ifndef H5 */
				padding-top: 30px;
			/* #endif */
			height: 165px;
			background: #3AE890;
			.image_box {
				width: 129rpx;
				height: 129rpx;
				margin: 10px 19px 0 40px;

				>image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.member_login {
				flex: 1;
				display: flex;
				flex-direction: column;

				// justify-content: space-around;
				.login {
					width: 200px;
					font-size: 38rpx;
					font-weight: bold;
					margin: 19rpx 0;
					color: #fff;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.member_level {
					width: 100px;
					padding: 0px 21rpx;
					background: #474758;
					border-radius: 12px;
					color: #ddc095;
					text-align: center;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					position: relative;
					line-height: 20px;
					.vip{
						position: absolute;
						top: 0;
						left: 0;
						img{
							width: 20px;
						}
					}
					.viptext{
						margin-left:15px;
					}
				}
			}
		}
		.main {
			height: 252px;
			background: #FFF;
			margin: 0 12px;
			margin-top: -30px;
			border-radius: 16px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			.top{
				display: flex;
				justify-content: space-evenly;
				>view{
					width: 30%;
					height: 75px;
					background: #e5fff2;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					border-radius: 16px;
					.icon_image{
						width: 29px;
						height: 29px;
						>image{
							width: 100%;
							height: 100%;
						}
					} 
					.title{
						font-size: 26rpx;
						text-align: center;
					}
					.title p:last-child{
						font-size: 12px;
					}
				}
			}
			.orders{
				height: 30px;
				display: flex;
				justify-content: space-between;
				margin: 0px 15px;
				.my_order{
					font-size: 19px;
					font-weight: bold;
				}
				.all_order{
					font-size: 29rpx;
					color: #7f7f7f;
				}
			}
			.bottom{
				height: 75px;
			    display: flex;
			    justify-content: space-evenly;
			    align-items: center;
				.order_type{
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.icons{
						width: 30px;
						height: 34px;
						>image{
							width: 100%;
							height: 100%;
						}
					}
					>text{
						margin-top: 10px;
						font-size: 26rpx;
						opacity: 0.5;
						font-weight: bold;
						// font-family: 'Courier New', Courier, monospace;
					}
					.marker{
						    position: absolute;
						    top: -15px;
						    right: -10px;
						    background-color: red;
						    width: 20px;
						    height: 20px;
						    border-radius: 50%;
						    text-overflow: ellipsis;
						    overflow: hidden;
						    white-space: nowrap;
						    font-size: 12px;
						    text-align: center;
						    line-height: 20px;
						    color: #fff;
					}
				}
			}
		}
		.information {
			background: #FFF;
			margin: 0 12px;
			margin-top: 30px;
			border-radius: 16px;
			padding: 0 12px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.information_item:last-child{
				border: none;
			}
			.information_item{
				line-height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 20px;
				border-bottom: 1px solid #eee;
				.left{
				    display: flex;
				    align-items: center;
					>text{
						font-size: 18px;
						font-weight: 500;
						opacity: 0.5;
					}
					.icons{
						width: 50rpx;
						height: 50rpx;
						line-height: 32px;
						color: #999;
						margin-right: 15px;
						>image{
							width: 100%;
							height: 100%;
						}
						/deep/.uni-icons{
							color: #999 !important;
						}
					}
					text{
						font-size: 29rpx;
						font-weight: 500;
					}
				}
				.right{
					width: 12px;
					height: 12px;
					>image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
